<template>
  <div class="col-span-12 lg:col-span-8 overflow-hidden rounded border border-stone-300">
    <div class="p-4">
      <h3 class="flex items-center gap-1.5 font-medium">
        <!-- SVG placeholder for FiUser -->
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
        Activity
      </h3>
    </div>

    <div class="h-64 px-4 pb-4">
      <Line :data="chartData" :options="chartOptions" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Line } from 'vue-chartjs';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  CartesianScaleOptions,
  CoreChartOptions,
  ElementChartOptions,
  PluginChartOptions,
  DatasetChartOptions,
  ScaleChartOptions,
  LineControllerChartOptions
} from 'chart.js';
import type { _DeepPartialObject } from 'chart.js/dist/types/utils';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
  datasets: [
    {
      label: 'New',
      borderColor: '#18181b',
      backgroundColor: '#18181b',
      data: [41, 96, 192, 50, 400, 200, 205],
      tension: 0.4, // Corresponds to Recharts' monotone
    },
    {
      label: 'Returning',
      borderColor: '#5b21b6',
      backgroundColor: '#5b21b6',
      data: [275, 620, 202, 500, 355, 875, 700],
      tension: 0.4, // Corresponds to Recharts' monotone
    },
  ],
};

const chartData = data;

// Type definition for Chart.js options in Vue Chartjs
type ChartJsOptions = _DeepPartialObject<CoreChartOptions<'line'> & ElementChartOptions<'line'> & PluginChartOptions<'line'> & DatasetChartOptions<'line'> & ScaleChartOptions<'line'> & LineControllerChartOptions>;

const chartOptions: ChartJsOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: false, // Hide legend like in the original
    },
    tooltip: {
      bodyFont: {
        size: 12, // text-sm
      },
      titleFont: {
        size: 10, // text-xs
      },
      titleColor: '#78716c', // text-stone-500
      boxPadding: 4,
    },
  },
  scales: {
    x: {
      grid: {
        color: '#e4e4e7', // CartesianGrid stroke
        drawBorder: false,
      },
      ticks: {
        font: {
          size: 10, // text-xs
          weight: 'bold',
        },
        padding: 4,
      },
      border: {
        display: false, // axisLine={false}
      }
    },
    y: {
      grid: {
        color: '#e4e4e7', // CartesianGrid stroke
        drawBorder: false,
      },
      ticks: {
        font: {
          size: 10, // text-xs
          weight: 'bold',
        },
      },
      border: {
        display: false, // axisLine={false}
      }
    },
  },
};

</script>

<style scoped>
/* Add any specific styles for ActivityGraph if needed */
</style>